<template>
  <div class="pay">
    <van-nav-bar title="支付" left-arrow @click-left="back" />
    <div class="content">
      <h4 class="title van-hairline--bottom">订单信息</h4>
      <div class="item row-between-center van-hairline--bottom" v-if="orderInfor.orderType!='MEMBER'">
        <label for="">服务项目</label>
        <span>{{orderInfor.serviceName||orderInfor.orderInformation||orderInfor.packageName}}</span>
      </div>
      <div class="item row-between-center van-hairline--bottom">
        <label for="">实付金额</label>
        <span>¥{{orderInfor.orderPrice?orderInfor.orderPrice:orderInfor.realPrice}}</span>
        <!--  <span v-if="orderInfor.realPrice">¥{{orderInfor.realPrice}}</span> -->

      </div>
      <div class="h_18"></div>
      <h4 class="title van-hairline--bottom">支付方式</h4>

      <van-radio-group v-model="payForm.data.payType">
        <div class="item row-between-center van-hairline--bottom">
          <label for="" class="flex"><i class="icon_wx"></i> 微信支付</label>
          <van-radio name="WECHAT"></van-radio>
        </div>
        <!-- <div class="item row-between-center van-hairline--bottom">
          <label for="" class="flex"><i class="icon_ali"></i> 支付宝支付</label>
          <van-radio name="ALIPAY"></van-radio>
        </div> -->
      </van-radio-group>
    </div>
    <div class="btn" @click="payAction">立即支付</div>
  </div>
</template>

<script>
import api from 'api/api'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      payForm: {
        data: {
          orderNo: '',
          payType: '',
          wechatType: "JSAPI",
          code: ''
        }
      }
    }
  },
  computed: {
    ...mapState(['orderInfor']),

  },
  created () {
    var that = this;
    // console.log(localStorage.getItem('payurl').search('/vip')!=-1)
    // api.wxAuthorize({
    //  data:{}
    // }).then(res=>{

    // })
    console.log(this.$route.params.id)
    api.orderDetail({
      data: {
        orderNo: this.$route.params.id
      }
    }).then(res => {
      console.log(res)
      this.$store.commit('UPDATA_ORDERINFOR', res.data)
      console.log(this.orderInfor)
      // this.orderInfor=res.data
    })
  },
  methods: {

    back () {
      window.history.go(-1)
    },
    setCode () {
      api.wxSetCode({
        data: this.$route.query.code
      }).then(res => {

      })
    },
    //支付行为
    payAction () {

      // this.setCode()
      var that = this
      //微信支付
      if (!this.payForm.data.payType) {
        this.$toast('请选择支付方式')
        return
      }
      console.log(this.payForm.data.payType)
      if (this.payForm.data.payType == 'WECHAT') {
        if (typeof WeixinJSBridge == 'undefined') {
          console.log('1122333')
          //   this.gohome()
          // this.$router.push({name:'order',query:{active:'3'}})

          if (document.addEventListener) {
            document.addEventListener(
              'WeixinJSBridgeReady',
              this.onBridgeReady,
              false
            )
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
            document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
          }
        } else {
          this.onBridgeReady()
        }

      } else {
        // 支付宝
      }

    },
    gohome () {
      this.$router.push("/order")
    },
    onBridgeReady () {
      console.log('支付11')

      api.goodPay({
        data: {
          orderNo: this.$route.params.id,
          payType: 'WECHAT',
          wechatType: 'JSAPI',
        }
      })
        .then(data => {
          var date = Date.parse(new Date());
          var res = data.data
          console.log('data=====', res)
          // return;
          var _this = this
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest',
            {
              appId: res.appId, //公众号名称，由商户传入
              timeStamp: res.timeStamp, //时间戳，自1970年以来的秒数
              nonceStr: res.nonceStr, //随机串
              package: res.packageValue,
              signType: res.signType, //微信签名方式：
              paySign: res.paySign, //微信签名

            },
            function (res) {
              if (res.err_msg == 'get_brand_wcpay_request:ok') {
                _this.$notify('支付成功')
                try {
                  if (localStorage.getItem('payurl').search('/vip') != -1) {
                    // window.location.href=localStorage.getItem('payurl')
                    window.history.go(-2)
                    localStorage.removeItem('payurl')
                    return
                  }
                } catch (error) {

                }
                _this.gohome()
              } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
                _this.$notify('已取消')
                return
              } else {
                _this.$notify('error')
                return
              }
            }
          )
        })
    },
  }
}
</script>

<style lang="scss">
.pay {
  .content {
    text-align: left;
    .title {
      font-size: 0.32rem;
      line-height: 0.99rem;
      padding: 0 0.29rem;
    }
    .item {
      font-size: 0.3rem;
      line-height: 1rem;
      padding: 0 0.2rem;
      label {
        align-items: center;
        .icon_wx {
          width: 0.33rem;
          height: 0.3rem;
          background-image: url("../../assets/img/home/wechat.png");
          background-size: contain;
          margin-right: 0.18rem;
        }
        .icon_ali {
          width: 0.31rem;
          height: 0.31rem;
          background-image: url("../../assets/img/home/zfb.png");
          background-size: contain;
          margin-right: 0.18rem;
        }
      }
    }
  }
  .h_18 {
    height: 0.18rem;
    background-color: #f5f5f5;
  }
  .btn {
    position: fixed;
    left: 0.29rem;
    bottom: 0.68rem;
    width: 6.9rem;
    line-height: 0.98rem;
    text-align: center;
    background: linear-gradient(
      96deg,
      rgba(72, 143, 240, 1),
      rgba(51, 130, 239, 1)
    );
    border-radius: 0.49rem;
    font-size: 0.36rem;
    color: #fff;
  }
}
</style>